<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@include file="../common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/page.css">

<title> <spring:message code="user.page.title"/></title>

<script type="text/javascript">
var _gridWidth;
var _gridHeight;
//页面自适应
function resizePageSize(){
    _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
    _gridHeight = $(document).height()-32-80; /* -32 顶部主菜单高度，   -90 查询条件高度*/
}

function rowDbclick(r){
    $(r).dblclick(
        function() {
            var columnsArray = $(r).attr('ch').split("_FG$SP_");
            $("#userName_mod").val(columnsArray[2]);
            $("#userUUID_mod").val(columnsArray[0]);
            $("#mobile_mod").val(columnsArray[1]);
            $("#email_mod").val(columnsArray[3]);
            $("#updateUserDailDialog").dialog("open");
        });

}

//回调函数
function onClickNode(event, treeId, treeNode) {
    console.info(treeNode.id);
    $("#userInfoId").val(treeNode.id);
    query([{ "name":"userUuid",value:treeNode.id}]);

}
$(function ()
{
    resizePageSize();



    var _columnWidth= (_gridWidth-150)/3;
    $("#flexiGridID").flexigrid({
        width : _gridWidth,
        height : _gridHeight,
        url : "${pageContext.request.contextPath}/userinfo/getUserInfolist",
        dataType : 'json',
        colModel : [
            {display : 'userID',name : 'userUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
            {display : "<spring:message code='pt.user.niceName'/>",name : 'niceName',width : _columnWidth, sortable : true,align : 'center'},
            {display : "<spring:message code='pt.user.mobile'/>",name : 'mobile',width : _columnWidth, sortable : true,align : 'center'},
            {display : "<spring:message code='pt.user.email'/>",name : 'email',width : _columnWidth, sortable : true,align : 'center'}
        ],
        resizable : false, //resizable table是否可伸缩
        usepager : true,
        useRp : true,
        usepager : true, //是否分页
        autoload : false, //自动加载，即第一次发起ajax请求
        hideOnSubmit : true, //是否在回调时显示遮盖
        showcheckbox : true, //是否显示多选框
        rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
        rowbinddata : true,
        numCheckBoxTitle : "<spring:message code='common.selectall'/>"
    });

    query();

    $("#addBtn").click(function (event) {
        event.stopPropagation();
        console.info("addBtn");
        $("#addUserDailFormId").resetForm();
        $("#addUserDialogId").dialog('open');
    });
    // $("addBtn").parent().click(function (event) {
    // 	console.info("parent");
    // });
    $( "#addUserDialogId" ).dialog({
        autoOpen : false,
        width : 400,
        modal : true,
        resizable : false,
        title: "<spring:message code='user.add'/>",
        buttons: [
            {
                text: "<spring:message code='common.confirm'/>",
                click: function() {
                    var addUserUuid = $("#addUserUuid");
                    var addMobile = $("#addMobile");
                    var addUserName = $("#addUserName");
                    var bValid = true;
                    //对值的校验
                    var allFields = $([]).add(addUserUuid).add(addMobile).add(addUserName);
                    allFields.removeClass("ui-addUserUuid-error");
                    //allFields.removeClass("ui-state-error");
                    //bValid = bValid && checkLength(addRoleUuid, 1, 255);
                    bValid = bValid && checkLength(addMobile, 1, 255);
                    bValid = bValid && checkLength(addUserName, 1, 64);

                    if(!bValid){
                        return;
                    }

                    $("#addUserDailFormId").submit();


                }
            },
            {
                text: "<spring:message code='common.cancel'/>",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });

    $('#addUserDailFormId').ajaxForm({
        dataType: "json",
        success : function(data) {
            $('#flexiGridID').flexReload();
            $("#addUserDialogId").dialog( "close" )
            message(data.msg);
        },
        error : function() {
            message("<spring:message code='common.error'/>");
        },
        complete : function(response, status) {

        }
    });
    $("#queryBtn").click(function (event) {
        var searchNiceName=$("#searchNiceName").val();
        var searchPhone=$("#searchPhone").val();
        var searchPost=$("#searchPost").val();

        var userInfoId = $("#userInfoId").val();
        query([
            { "name":"userUuid",value:userInfoId},
            { "name":"searchNiceName",value:searchNiceName},
            { "name":"searchPhone",value:searchPhone}
        ]);

    });


    $( "#updateUserDailDialog" ).dialog({
        autoOpen : false,
        width : 400,
        modal : true,
        resizable : false,
        title: "<spring:message code='common.update.title'/>",
        buttons: [
            {
                text: "<spring:message code='common.confirm'/>",
                click: function() {
                    $("#updateUserDailFormId").submit();
                }
            },
            {
                text: "<spring:message code='common'/>",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });

    $('#updateUserDailFormId').ajaxForm({
        dataType: "json",
        success : function(data) {
            $('#flexiGridID').flexReload();
            $("#updateUserDailDialog").dialog( "close" )
        },
        error : function() {
            message("<spring:message code='common.error'/>");
        },
        complete : function(response, status) {

        }
    });

    // 岗位
    $("#boundZtreeDialogId").dialog({
        autoOpen : false,
        width : 400,
        height: 500,
        modal : true,
        resizable : false,
        title: "<spring:message code='pt.user.post'/>",
        buttons: [
            {
                text: "<spring:message code='common.confirm'/>",
                click: function() {
                    var dutyid=[];//单选，单选是checkId，多选是数组
                    var treeObj = $.fn.zTree.getZTreeObj("ulZtreeBoundId");
                    //获取所有选中节点，不包括禁用
                    var nodes = treeObj.getCheckedNodes(true);
                    if(nodes && nodes.length>0){
                        for (var i=0; i<nodes.length; i++){
                            dutyid.push(nodes[i].id);
                        }
                    }
                    var userUuid = searchTableColumn($("#flexiGridID"),0);
                    console.log(dutyid);
                    if(dutyid){
                        $.ajax({
                            type : 'POST',
                            url : '${pageContext.request.contextPath}/userinfo/bondOrganUser',
                            dataType : 'json',
                            cache : false,
                            data : [
                                {name:"userUuid",value:userUuid},
                                {name:"dutyid",value:dutyid}
                            ],
                            success : function(data) {
                                $('#flexiGridID').flexReload();
                                $("#boundZtreeDialogId").dialog("close");
                                message(data.msg);
                            },
                            error : function() {
                                message("<spring:message code='common.error'/>");
                            }
                        });
                    }else{
                        message("<spring:message code='common.empty'/>");
                    }
                }
            },
            {
                text: "<spring:message code='common.cancel'/>",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });




    //删除
    $("#delBtn").click(function (event) {
        var ids = searchTableColumn($("#flexiGridID"),0);
        if(ids.length===0){
            message("<spring:message code='common.empty'/>");
            return;
        }
        $.ajax({
            type : 'POST',
            url : '${pageContext.request.contextPath}/userinfo/deleteUserInfo',
            dataType : 'json',
            cache : false,
            data : [ {
                name : 'ids',
                value : ids
            } ],
            success : function(data) {
                $('#flexiGridID').flexReload();
                message(data.msg);
            },
            error : function() {
                message("<spring:message code='common.error'/>");
            }
        });

    });

    // 角色
    $("#roleBoundIdBtn").click(function (event) {
        var userUuid = searchTableColumn($("#flexiGridID"),0);
        if(userUuid.length != 1){
            message("<spring:message code='common.empty'/>");
            return;
        }
        console.log(userUuid);
        $.ajax({
            type : 'POST',
            url : '${pageContext.request.contextPath}/userinfo/queryRoleInfoZtreeList',
            dataType : 'json',
            cache : false,
            data : [
                {name:"userUuid",value:userUuid[0]}
            ],
            success : function(data) {
                $.fn.zTree.init($("#roleulZtreeBoundId"), settingBond, data);
            },
            error : function() {
                message("<spring:message code='common.error'/>");
            }
        });
        $("#roleboundZtreeDialogId").dialog('open');
    })

    // 角色
    $("#roleboundZtreeDialogId").dialog({
        autoOpen : false,
        width : 400,
        height: 500,
        modal : true,
        resizable : false,
        title: "<spring:message code='role.allocate'/>",
        buttons: [
            {
                text: "<spring:message code='common.confirm'/>",
                click: function() {
                    var roleUuid=[];//单选，单选是checkId，多选是数组
                    var treeObj = $.fn.zTree.getZTreeObj("roleulZtreeBoundId");
                    //获取所有选中节点，不包括禁用
                    var nodes = treeObj.getCheckedNodes(true);
                    if(nodes && nodes.length >0){
                        for(var i=0; i < nodes.length; i++){
                            roleUuid.push(nodes[i].id);
                        }
                    }
                    var userUuid = searchTableColumn($("#flexiGridID"),0);
                    console.log(roleUuid);
                    if(roleUuid){
                        $.ajax({
                            type : 'POST',
                            url : '${pageContext.request.contextPath}/userinfo/bondRoleUser',
                            dataType : 'json',
                            cache : false,
                            data : [
                                {name:"userUuid",value:userUuid},
                                {name:"roleUuid",value:roleUuid}
                            ],
                            success : function(data) {
                                $('#flexiGridID').flexReload();
                                $("#roleboundZtreeDialogId").dialog("close");
                                message(data.msg);
                            },
                            error : function() {
                                message("<spring:message code='common.error'/>");
                            }
                        });
                    }else{
                        message("<spring:message code='common.empty'/>");
                    }
                }
            },
            {
                text: "<spring:message code='common.cancel'/>",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });


});

function query(param1){
    $('#flexiGridID').flexOptions({
        newp: 1,
        extParam: param1||[]
    }).flexReload();
}

//设置样式
var setting = {
    check: {
        enable: false //是否被选中
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback : {
        onClick : onClickNode
    }
};
var settingBond = {
    check: {
        enable: true,
        chkStyle: "checkbox"
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback : {
        onClick : onClickNode
    }
};

</script>
</head>
<body style="display: flex;flex-direction: row">
<%--    <input type="hidden" id="userInfoId"/>--%>

    <!-- 权限树页面标签,对应的组件 -->
<%--    <div id="userInfoTreeID" class="zTreeDemoBackground left"--%>
<%--         title="<spring:message code='user.page.title'/>" align="center" style="flex-basis: 200px">--%>
<%--        <spring:message code="user.page.title"/>--%>
<%--        <ul id="userTreeID" class="ztree"></ul> <!--菜单列表-->--%>
<%--    </div>--%>
    <div style="display: block; margin: 0px;flex-flow: 1">
        <div style="padding-top: 5px;">
            <label> <spring:message code='user.niceName'/>:</label> <input type="text" id="searchNiceName"/>
            <label> <spring:message code='pt.user.mobile'/>:</label> <input type="text" id="searchPhone"/>
            <label> <spring:message code='pt.user.company'/>:</label>

            <a href="#" id="queryBtn" class="ui-state-default ui-corner-all cbe-button"><span class="ui-icon ui-icon-search"></span><spring:message code='common.query'/></a>
            <a href="#" id="delBtn" class="ui-state-default ui-corner-all cbe-button"><span class="ui-icon ui-icon-minusthick"></span><spring:message code='common.delete'/></a>
            <a href="#" id="addBtn" class="ui-state-default ui-corner-all cbe-button"><span class="ui-icon ui-icon-plus"></span><spring:message code='common.add'/></a>
            <a href="#" id="roleBoundIdBtn" class="ui-state-default ui-corner-all cbe-button"><span class="ui-icon ui-icon-plus"></span><spring:message code='role.allocate'/></a>

        </div>
        <table id="flexiGridID" style="display: block;margin: 0px;"></table>
    </div>



<div id="updateUserDailDialog" style="display: none;">
    <form id="updateUserDailFormId" action="${pageContext.request.contextPath}/userinfo/updateUserDail" method="post" >
        <input type="hidden" id="userUUID_mod" name="userUuid" />
        <!-- hidden -->
        <table >
            <tr>
                <td class="fileName">
                    <label><spring:message code="user.niceName"/></label>
                </td>
                <td class="fileValue" >
                    <input type="text" id="userName_mod" name="niceName" />
                    <span class="mand">*</span>
                </td>
            </tr>
            <tr>
                <td class="fileName">
                    <label><spring:message code="pt.user.mobile"/></label>
                </td>
                <td class="fileValue" >
                    <input type="text" id="mobile_mod" name="mobile" />
                    <span class="mand">*</span>
                </td>
            </tr>
            <tr>
                <td class="fileName">
                    <label><spring:message code="pt.user.email"/></label>
                </td>
                <td class="fileValue" >
                    <input type="text" id="email_mod" name="email" />
                    <span class="mand">*</span>
                </td>
            </tr>

        </table>
    </form>
</div>

<div id="addUserDialogId" style="display: none;">
    <form id="addUserDailFormId" action="${pageContext.request.contextPath}/userinfo/addUser" method="post" >
        <table >
            <tr>
                <td class="fileName">
                    <label><spring:message code ="user.user.name"/></label>
                </td>
                <td class="fileValue" >
                    <input type="text" id="addUserName" name="userName" />
                    <span class="mand">*</span>
                </td>
            </tr>
            <tr>
                <td class="fileName">
                    <label><spring:message code ="pt.user.mobile"/></label>
                </td>
                <td class="fileValue" >
                    <input type="text" id="addMobile" name="mobile" />
                    <span class="mand">*</span>
                </td>
            </tr>
            <tr>
                <td class="fileName">
                    <label><spring:message code ="pt.user.password"/></label>
                </td>
                <td class="fileValue" >
                    <input type="text" id="addPassword" name="password" />
                    <span class="mand">*</span>
                </td>
            </tr>
            <tr>
                <td class="fileName">
                    <label><spring:message code ="pt.user.email"/></label>
                </td>
                <td class="fileValue" >
                    <input type="text" id="addEMAIL" name="email" />
                    <span class="mand">*</span>
                </td>
            </tr>
            <tr>
                <td class="fileName">
                    <label><spring:message code ="pt.user.niceName"/></label>
                </td>
                <td class="fileValue" >
                    <input type="text" id="addNiceName" name="niceName" />
                    <span class="mand">*</span>
                </td>
            </tr>
            <tr>
                <td class="fileName">
                    <label><spring:message code ="pt.user.remark"/></label>
                </td>
                <td class="fileValue" >
                    <input type="text" id="addRemark" name="remark" />
                    <span class="mand">*</span>
                </td>
            </tr>
        </table>
    </form>
</div>

<%--岗位--%>
    <div id="boundZtreeDialogId" style="display: none">
        <ul id="ulZtreeBoundId" class="ztree"></ul>
    </div>

<%--部门--%>
    <div id="departboundZtreeDialogId" style="display: none">
        <ul id="departulZtreeBoundId" class="ztree"></ul>
    </div>

<%--角色--%>
    <div id="roleboundZtreeDialogId" style="display: none">
        <ul id="roleulZtreeBoundId" class="ztree"></ul>
    </div>

</body>
</html>